<template>
    <div>
        <div class="top">
              <span @click="back()">&lt;</span> 
              <h1>约到哪儿</h1> 
              <p @click="fun()">+新增地址</p>
        </div>
        <h2>我的常用地址</h2>
        <br> 
        <div class="ard" v-for="(v,i) in arr" :key="i">
          <span>{{v.aname}}</span>&nbsp;&nbsp;<span>{{v.tel}}</span>
          <br>
          <h2>{{v.address}}</h2>
        </div>
    </div>
</template>

<script>
import {getlink} from "../../api/getapi.js"
export default {
  data(){
    return{
      arr:[]
    }
  },
  methods: {
    fun(){
        this.$router.push("/adz");
    },
    back(){
        this.$router.push("/home");
    }
  },
  mounted(){
    getlink("/api/selectAllAddress").then((ok)=>{
      console.log(ok.data);
      this.arr=ok.data;
      // console.log(this.arr);
    })
  }
};

</script>

<style scoped>
div{
  background-color: gainsboro;
}
.top{
    width: 100%;
    height: 1.5rem;
    display: flex;
    justify-content: space-around;
    line-height: 1.5rem;
}
.top span{
    font-size: 0.5rem;
    color: black;
    font-weight: 200;
}
.top h1{
    margin-left: 0.4rem;
    font-size: 0.5rem;
}
.ard{
  background-color:white;
  width: 100%;
  height: 1rem;
  margin-bottom: 0.1rem;
}
.ard span{
  font-size: 0.32rem;
}
.adr h2{
  font-size: 0.32rem;
}
</style>
